<template>
  <div id="panel">
    <template>
      <el-card class="queryForm">
        <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          :label-position="'right'"
        >
          <el-form-item label="选择月：" prop="day">
            <el-date-picker
              v-model="queryParams.day"
              type="month"
              format="yyyy年MM月"
              value-format="yyyy-MM"
              placeholder="选择月份"
              class="month-picker"
              @change="handleMonthChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
              style="padding: 10px"
              >查询</el-button
            >
            <!-- <el-button @click="resetQuery" style="padding: 10px">
              <i class="iconfont icon-saoba"></i>
              重置
            </el-button> -->
            <el-button type="primary" @click="handleExport">导出</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="pageContent">
        <el-table
          id="selectTable"
          :data="tableList.rows"
          stripe
          :height="tableHeight"
          v-loading="loading"
          :span-method="objectSpanMethod"
          border
          :cell-style="cellStyle"
        >
          <!-- 动态渲染表头 -->
          <el-table-column
            v-for="(column, index) in columns"
            :key="index"
            :prop="column.prop"
            :label="column.label"
            align="center"
          ></el-table-column>
        </el-table>
      </el-card>
    </template>
  </div>
</template>

<script>
import tableToExcel from "@/utils/tableToExcel";
import getTime from "@/utils/getTime.js";
import { getWeekReport } from "@/api/drinkingwatersource.js";

export default {
  name: "HydrologicStation",
  props: ["selTreeId"],
  components: {},
  computed: {},
  data() {
    return {
      tableHeight: window.innerHeight - 350,
      options: [],
      basinOptions: [],
      regionList: [],
      lakeList: [],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        day: "",
      },
      tableList: {
        total: 0,
        rows: [],
      },
      columns: [],

      // 用于存储延迟请求的定时器
      requestTimer: null,
      monthRange: {
        start: "", // 周开始时间（周一，yyyy-mm-dd）
        end: "", // 周结束时间（周日，yyyy-mm-dd）
      },
    };
  },
  watch: {
    selTreeId: {
      handler(newVal) {
        if (newVal) {
          this.selTreeId = newVal;
          // 有id时立即请求数据
          this.getList();
          // 清除可能存在的定时器
          if (this.requestTimer) {
            clearTimeout(this.requestTimer);
          }
        } else {
          // 没有id时延迟重试（这里设置1秒后重试）
          this.delayRequest();
        }
      },
      deep: true,
    },
  },
  created() {
    // 初始化默认选中当前月
    this.setCurrentMonth();
  },
  mounted() {
    this.pageInit();
  },
  methods: {
    /**
     * 核心：单元格合并方法（实现整体水质、超标项横向合并）
     * @param {Object} param0 - 表格单元格参数（row：当前行数据，columnIndex：列索引）
     * @returns {Object} 合并配置（rowspan：行合并数，colspan：列合并数）
     */
    objectSpanMethod({ row, columnIndex }) {
      // 总列数 = 动态表头长度（确保合并范围适配表头）
      const totalColumnCount = this.columns.length;
      // 合并列数 = 总列数 - 1（排除第1列，从第2列合并到最后一列）
      const mergeColumnCount = totalColumnCount - 1;

      // 1. 处理“整体水质”行
      if (row?.column1 === "整体水质") {
        if (columnIndex === 0) {
          // 第1列：显示“整体水质”文本，不合并
          return { rowspan: 1, colspan: 1 };
        } else if (columnIndex === 1) {
          // 第2列：作为合并起始列，合并后续所有列
          return { rowspan: 1, colspan: mergeColumnCount };
        } else {
          // 第3列及以后：隐藏（被合并覆盖，避免重复显示）
          return { rowspan: 1, colspan: 0 };
        }
      }

      // 2. 处理“超标项”行
      if (row?.column1 === "超标项") {
        if (columnIndex === 0) {
          // 第1列：显示“超标项”文本，不合并
          return { rowspan: 1, colspan: 1 };
        } else if (columnIndex === 1) {
          // 第2列：作为合并起始列，合并后续所有列
          return { rowspan: 1, colspan: mergeColumnCount };
        } else {
          // 第3列及以后：隐藏
          return { rowspan: 1, colspan: 0 };
        }
      }

      // 3. 其他行：不合并
      return { rowspan: 1, colspan: 1 };
    },

    /**
     * 单元格样式（优化合并行视觉效果）
     * @param {Object} param0 - 单元格参数
     * @returns {Object} 样式配置
     */
    cellStyle({ row }) {
      // 合并行（整体水质/超标项）添加背景色，突出显示
      if (row?.column1 === "整体水质" || row?.column1 === "超标项") {
        return {
          backgroundColor: "#f0f7ff", // 淡蓝色背景
          fontWeight: "500", // 字体加粗
        };
      }
      return {};
    },
    // 延迟请求方法
    delayRequest() {
      // 清除之前的定时器，避免重复创建
      if (this.requestTimer) {
        clearTimeout(this.requestTimer);
      }

      // 1秒后再次检查id是否存在
      this.requestTimer = setTimeout(() => {
        if (this.itemId) {
          this.getList();
        } else {
          // 如果仍无id，继续延迟重试
          this.delayRequest();
        }
      }, 1000);
    },
    // 设置当前月为默认选中
    setCurrentMonth() {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, "0");
      this.queryParams.day = `${year}-${month}`;

      // 计算当前月的开始和结束日期
      this.calculateMonthRange(this.queryParams.day);
    },

    // 处理月份选择变化
    handleMonthChange(monthStr) {
      if (!monthStr) return;

      // 计算选中月份的开始和结束日期
      this.calculateMonthRange(monthStr);

      // 向父组件发射月份范围
      this.$emit("month-selected", this.monthRange);
    },

    // 计算月份的开始（第一天）和结束（最后一天）
    calculateMonthRange(monthStr) {
      const [year, month] = monthStr.split("-").map(Number);

      // 月份第一天（yyyy-mm-01）
      const start = new Date(year, month - 1, 1);

      // 月份最后一天（下个月第一天减一天）
      const end = new Date(year, month, 0);

      // 格式化并保存
      this.monthRange.start = this.formatDate(start);
      this.monthRange.end = this.formatDate(end);
    },

    // 日期格式化（yyyy-mm-dd）
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },

    //页面初始化请求的数据
    pageInit() {
      this.getList();
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val;
      this.getList();
    },
    //搜索
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //重置、清除表单
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
    },

    //导出
    handleExport() {
      tableToExcel.getExcel("#selectTable", "监测数据月报表");
    },
    // 获取表格数据
    getList() {
      console.log(">>>tineqjjj", this.monthRange);

      let query = {};
      console.log(">>>treeid", this.selTreeId);
      query.startTime = this.monthRange.start;
      query.endTime = this.monthRange.end;
      query.id = this.selTreeId;
      this.loading = true;
      getWeekReport(query).then((res) => {
        this.tableList.total = res.total;
        this.tableList.rows = res.data.tableData;
        this.columns = res.data.tableOp;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

img {
  vertical-align: middle;
}

#panel {
  padding-bottom: 0px;
  min-height: calc(100% - 20px);
  margin: 0;

  // 控制分页的样式----二次开发
  .pagination-self {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
    position: relative;

    .el-pagination__total {
      position: absolute;
      left: 5px;
      color: #409eff;
      font-weight: 600;
      font-size: 15px;
    }
  }

  // 控制分页刷新按钮样式
  .refresh-button {
    .el-icon-refresh {
      font-size: 18px;
      line-height: 28px;
    }
  }

  .el-card {
    margin: 10px;
  }

  .queryForm .el-card__body {
    padding: 0 20px !important;
  }

  .queryForm {
    // .el-card__body {
    //   padding-left: 0 !important;
    // }
    .el-form-item {
      margin: 10px 0 10px 10px;
    }

    .el-form-item:first-child {
      margin-left: 0 !important;
    }

    .el-form-item__label {
      padding-right: 5px;
      color: #555;
    }

    .times {
      .el-form-item__content {
        width: 250px;
      }
    }

    .el-form-item__content {
      min-width: 200px;
      // & > div {
      //   width: 100% !important;
      // }
    }

    .searchBtnBox {
      display: inline-block;
      margin: 20px 0 20px 20px;
    }
  }

  .pageContent {
    .tabs-list {
      padding-top: 20px;
    }

    .el-tabs__header {
      background: #fff;
    }

    .el-tabs__item {
      border: 1px solid #eee;
      margin: 0;
      border-left: 0;
      background: #fafbfc;
      color: #000;
    }

    .el-tabs__item:first-child {
      margin-left: 20px;
      border-left: 1px solid #eee;
    }

    .is-active {
      border-bottom: 0 !important;
      background: #fff;
      color: #307eff;
    }
  }

  .anjian label {
    padding: 0 !important;
    width: 100px !important;
  }

  .queryForm .el-checkbox {
    margin-right: 10px !important;
    width: auto !important;
  }

  .iszgfc .el-form-item__content {
    width: 120px;
  }
}
// 左右横排的标题和更多
.titleBox {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dfe4ed;
  margin: 0 20px 20px 20px;
  position: relative;
  &::before {
    display: block;
    content: "";
    width: 3px;
    height: 16px;
    background: #307eff;
  }
  .title {
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 10px;
    font-weight: 500;
  }
  .more {
    font-size: 16px;
    color: #999;
    cursor: pointer;
  }
}
</style>
